{#
  This Source Code Form is subject to the terms of the Mozilla Public
  License, v. 2.0. If a copy of the MPL was not distributed with this
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "macros-protocol.html" import picto, split,  with context %}

{% extends "products/vpn/base.html" %}

{% block page_title_full %}{{ ftl('vpn-download-page-title') }}{% endblock %}
{% block page_title_suffix %}{% endblock %}

{% block page_desc %}{{ ftl('vpn-download-page-description') }}{% endblock %}

{% block page_css %}
  {{ css_bundle('protocol-picto') }}
  {{ css_bundle('protocol-split') }}
  {{ css_bundle('protocol-emphasis-box') }}
  {{ css_bundle('mozilla-vpn-download') }}
{% endblock %}

{% set android_download_url = play_store_url('vpn', 'vpn-download-page') %}
{% set ios_download_url = app_store_url('vpn', 'vpn-download-page') %}

{% set _utm_source = 'www.mozilla.org-vpn-download-page' %}
{% set _utm_campaign = 'vpn-download-page' %}
{% set _params = '?utm_source=' ~ _utm_source ~ '&utm_medium=referral&utm_campaign=' ~ _utm_campaign %}

{% block site_header %}
  {% with
    hide_nav_download_button=True,
    hide_nav_get_vpn_button=True
  %}
    {% include 'includes/protocol/navigation/navigation.html' %}
  {% endwith %}
{% endblock %}

{% block content %}
<main>
  <section class="vpn-downloads">
    <header class="vpn-download-header">
      {% if block_download %}
        <div class="mzp-l-content vpn-download-blocked" data-testid="vpn-download-blocked-message">
          <h1>{{ self.page_title_full() }}</h1>
          <p>{{ ftl('vpn-download-not-available-in-country') }}</p>
        </div>
      {% else %}
      {% call split(
        block_class='mzp-l-split-body-wide mzp-l-split-center-on-sm-md',
        body_class='mzp-l-split-h-start',
        media_class='mzp-l-split-center-on-sm-md mzp-l-split-h-center',
        media_after=True,
        image=resp_img(
          url='img/products/vpn/landing/vpn-cntwell-04.png',
          optional_attributes={
          'class': 'mzp-c-split-media-asset'
          }
        )
      ) %}
        <div class="vpn-logo">
          <img src="{{ static('img/logos/vpn/vpn-dark-logo.svg') }}" alt="">
        </div>
        <h1>{{ self.page_title_full() }}</h1>
        <p>{{ ftl('vpn-download-sub-heading', devices=connect_devices) }}</p>
        <p>{{ ftl('vpn-download-mozilla-vpn-offers') }}</p>
      {% endcall %}
      {% endif %}
    </header>

    {% if not block_download %}
      <div class="vpn-download-options mzp-l-content" data-testid="vpn-download-options">
        <!-- Primary list -->
        <div class="vpn-download-primary-platform">
          <!-- Windows -->
          <div class="primary-platform windows">
            <div class="platform-image">
              <img src="{{ static('img/products/vpn/download/platform-windows.svg') }}" alt="">
            </div>
            <div class="platform-body">
              <h2>{{ ftl('vpn-download-for-windows-long') }}</h2>
              <p class="current-platform-lede">{{ ftl('vpn-download-based-on-your') }}</p>
              <p>{{ ftl('vpn-download-for-windows-requirements') }}</p>
              <a class="mzp-c-button ga-product-download" href="{{ url('products.vpn.windows-download') }}" data-cta-text="VPN Download (Windows)" data-testid="vpn-download-link-primary-windows">
              {{ ftl('vpn-download-get-mozilla-vpn', fallback='vpn-shared-subscribe-link') }}
              </a>
            </div>
          </div>
          <!-- Mac OS -->
          <div class="primary-platform macos">
            <div class="platform-image">
              <img src="{{ static('img/products/vpn/download/platform-mac.svg') }}" alt="">
            </div>
            <div class="platform-body">
              <h2>{{ ftl('vpn-download-for-mac-long', fallback='vpn-download-for-mac') }}</h2>
              <p class="current-platform-lede">{{ ftl('vpn-download-based-on-your') }}</p>
              <p>{{ ftl('vpn-download-version-requirements', version='11.0') }}</p>
              <a class="mzp-c-button ga-product-download" href="{{ url('products.vpn.mac-download') }}" data-cta-text="VPN Download (macOS)" class="platform-download-link" data-testid="vpn-download-link-primary-mac">
              {{ ftl('vpn-download-get-mozilla-vpn', fallback='vpn-shared-subscribe-link') }}
              </a>
            </div>
          </div>
          <!-- Linux -->
          <div class="primary-platform linux">
            <div class="platform-image">
              <img src="{{ static('img/products/vpn/download/platform-linux.svg') }}" alt="">
            </div>
            <div class="platform-body">
              <h2>{{ ftl('vpn-download-for-linux-long', fallback='vpn-download-for-linux') }}</h2>
              <p class="current-platform-lede">{{ ftl('vpn-download-based-on-your') }}</p>
              <p>{{ ftl('vpn-download-for-linux-requirements', version='22.04') }}</p>
              <div class="platform-link-container">
                <a class="mzp-c-button ga-product-download" href="https://flathub.org/apps/org.mozilla.vpn/?utm_medium=referral&utm_source=www.mozilla.org-vpn-download-page&utm_campaign=vpn-download-page" data-cta-text="Install via Flathub" class="platform-download-link">
                {{ ftl('vpn-download-install-via-flathub') }}
                </a>
                <a class="mzp-c-button ga-product-download" href="{{ linux_download_url }}" data-cta-text="Install via APT" class="platform-download-link">
                {{ ftl('vpn-download-install-via-apt') }}
                </a>
              </div>
            </div>
          </div>
          <!-- iOS -->
          <div class="primary-platform ios">
            <div class="platform-image">
              <img src="{{ static('img/products/vpn/download/platform-ios.svg') }}" alt="">
            </div>
            <div class="platform-body">
              <h2>{{ ftl('vpn-download-for-ios-long-v2', fallback='vpn-download-for-ios') }}</h2>
              <p class="current-platform-lede">{{ ftl('vpn-download-based-on-your') }}</p>
              <p>{{ ftl('vpn-download-version-requirements', version='15.0') }}</p>
              <a href="{{ ios_download_url }}" data-cta-text="VPN Download (iOS)" class="platform-download-link ga-product-download">
                <img src="{{ static('img/products/vpn/download/apple-app-store-badge.svg') }}" alt=" {{ ftl('vpn-download-get-mozilla-vpn', fallback='vpn-shared-subscribe-link') }}">
              </a>
            </div>
          </div>
          <!-- Android -->
          <div class="primary-platform android">
            <div class="platform-image">
              <img src="{{ static('img/products/vpn/download/platform-android.svg') }}" alt="">
            </div>
            <div class="platform-body">
              <h2>{{ ftl('vpn-download-for-android-long', fallback='vpn-download-for-android') }}</h2>
              <p class="current-platform-lede">{{ ftl('vpn-download-based-on-your') }}</p>
              <p>{{ ftl('vpn-download-version-requirements', version='8.0') }}</p>
              <a class="platform-download-link ga-product-download" href="{{ android_download_url }}" data-cta-text="VPN Download (Android)" target="_blank" rel="noopener noreferrer">
                <img src="{{ static('img/products/vpn/download/google-play-badge.png') }}" alt=" {{ ftl('vpn-download-get-mozilla-vpn', fallback='vpn-shared-subscribe-link') }}">
              </a>
            </div>
          </div>
          <h3>{{ ftl('vpn-download-also-available') }}</h3>
        </div>

        <!-- Secondary list -->
        <ul class="vpn-download-secondary-list">
          <!-- Windows Firefox Extension -->
          <li class="secondary-platform windows firefox-extension">
            <div class="platform-image">
              <img src="{{ static('img/products/vpn/download/platform-firefox-extension.svg') }}" alt="">
            </div>
            <div class="platform-body">
              <h2>{{ ftl('vpn-download-for-firefox-extension') }}</h2>
              <p>{{ ftl('vpn-download-for-windows-requirements') }}</p>
            </div>
            <a class="platform-download-link" href="https://addons.mozilla.org/firefox/addon/mozilla-vpn-extension/?utm_medium=referral&utm_source=mozilla-vpn-website&utm_campaign=evergreen&utm_content=downloads-page" data-cta-text="Install Firefox Extension">
              <span class="visually-hidden">{{ ftl('vpn-download-for-firefox-extension') }}</span>
            </a>
          </li>
          <!-- Windows -->
          <li class="secondary-platform windows">
            <div class="platform-image">
              <img src="{{ static('img/products/vpn/download/platform-windows.svg') }}" alt="">
            </div>
            <div class="platform-body">
              <h2>{{ ftl('vpn-download-for-windows-v2') }}</h2>
              <p>{{ ftl('vpn-download-for-windows-requirements') }}</p>
            </div>
            <a href="{{ url('products.vpn.windows-download') }}" data-cta-text="VPN Download (Windows)" class="platform-download-link ga-product-download" data-testid="vpn-download-link-secondary-windows">
              <span class="visually-hidden">{{ ftl('vpn-download-for-windows-long') }}</span>
            </a>
          </li>
          <!-- Mac OS -->
          <li class="secondary-platform macos">
            <div class="platform-image">
              <img src="{{ static('img/products/vpn/download/platform-mac.svg') }}" alt="">
            </div>
            <div class="platform-body">
              <h2>{{ ftl('vpn-download-for-mac') }}</h2>
              <p>{{ ftl('vpn-download-version-requirements', version='11.0') }}</p>
            </div>
            <a href="{{ url('products.vpn.mac-download') }}" data-cta-text="VPN Download (macOS)" class="platform-download-link ga-product-download" data-testid="vpn-download-link-secondary-mac">
              <span class="visually-hidden">{{ ftl('vpn-download-for-mac-long') }}</span>
            </a>
          </li>
          <!-- Linux -->
          <li class="secondary-platform linux">
            <div class="platform-image">
              <img src="{{ static('img/products/vpn/download/platform-linux.svg') }}" alt="">
            </div>
            <div class="platform-body">
              <h2>{{ ftl('vpn-download-for-linux') }}</h2>
              <p>{{ ftl('vpn-download-for-linux-requirements', version='22.04') }}</p>
            </div>
            <div class="platform-link-container">
              <a class="mzp-c-button mzp-t-secondary ga-product-download" href="https://flathub.org/apps/org.mozilla.vpn/?utm_medium=referral&utm_source=www.mozilla.org-vpn-download-page&utm_campaign=vpn-download-page" data-cta-text="Install via Flathub" class="platform-download-link">
                <span class="platform-download-linux-arrow"></span>
                {{ ftl('vpn-download-flathub') }}
              </a>
              <a class="mzp-c-button mzp-t-secondary ga-product-download" href="{{ linux_download_url }}" data-cta-text="Install via APT" class="platform-download-link">
                <span class="platform-download-linux-arrow" aria-hidden="true"></span>
                {{ ftl('vpn-download-apt') }}
              </a>
            </div>
          </li>
          <!-- iOS -->
          <li class="secondary-platform ios">
            <div class="platform-image">
              <img src="{{ static('img/products/vpn/download/platform-ios.svg') }}" alt="">
            </div>
            <div class="platform-body">
              <h2>{{ ftl('vpn-download-for-ios') }}</h2>
              <p>{{ ftl('vpn-download-version-requirements', version='15.0') }}</p>
            </div>
            <a href="{{ ios_download_url }}" data-cta-text="VPN Download (iOS)" class="platform-download-link ga-product-download">
              <span class="visually-hidden">{{ ftl('vpn-download-for-ios-long-v2') }}</span>
            </a>
          </li>
          <!-- Android -->
          <li class="secondary-platform android">
            <div class="platform-image">
              <img src="{{ static('img/products/vpn/download/platform-android.svg') }}" alt="">
            </div>
            <div class="platform-body">
              <h2>{{ ftl('vpn-download-for-android') }}</h2>
              <p>{{ ftl('vpn-download-version-requirements', version='8.0') }}</p>
            </div>
            <a href="{{ android_download_url }}" data-cta-text="VPN Download (Android)" class="platform-download-link ga-product-download">
              <span class="visually-hidden">{{ ftl('vpn-download-for-android-long') }}</span>
            </a>
          </li>
        </ul>
      </div>
      {% if ftl_has_messages('vpn-download-previous-versions') %}
        <div class="vpn-download-previous-versions mzp-l-content ">
          <p>
            <a href="https://archive.mozilla.org/pub/vpn/releases/" data-cta-text="VPN Download Previous Versions">{{ ftl('vpn-download-previous-versions') }}</a>
          </p>
        </div>
      {% endif %}
    {% endif %}
  </section>

  {% if ftl_has_messages('vpn-download-privacy-you-can') %}
    <section class="vpn-privacy">
      {% call split(
        block_class=' mzp-l-split-reversed mzp-l-split-center-on-sm-md',
        media_class='mzp-l-split-h-center mzp-l-split-center-on-sm-md',
        media_after=True,
        image=resp_img(
        url='img/products/vpn/download/vpn-download-shield.png',
        optional_attributes={
        'class': 'mzp-c-split-media-asset'
        }),
      ) %}
      <h2>{{ ftl('vpn-download-privacy-you-can') }}</h2>
      <p>{{ ftl('vpn-download-from-the-maker', url='https://mullvad.net/help/why-wireguard/', attrs='target="_blank" rel="external noopener noreferrer"') }}</p>
      <p>{{ ftl('vpn-download-we-never-log') }}</p>
      {% endcall %}
    </section>
  {% endif %}

  <footer class="vpn-footer">
    {% include 'products/vpn/includes/footer-legal.html' %}
  </footer>
</main>
{% endblock %}


{% block js %}{% endblock %}
